<template>
  <div class="flex">
    <div ref="ysElement">正在按下的是：</div>
    <h2 class="">{{ content }}</h2>
  </div>
</template>
<script>
import { getCurrentInstance, onMounted, reactive, toRefs } from 'vue';
import { useEventListener } from '@vueuse/core';
export default {
  name: '',
  props: {},
  components: {},
  setup(props, { emit }) {
    const { proxy } = getCurrentInstance();
    function initState() {
      return {
        content: '',
      };
    }
    const state = reactive(initState());
    onMounted(() => {
      useEventListener(document, 'keydown', e => {
        console.log(e.key);
        state.content = e.key;
      });
    });
    return {
      ...toRefs(state),
    };
  },
};
</script>